<template>
    <view class="content">
        <u-navbar title="个人信息"  :autoBack="true">
        </u-navbar>
        <view class="info">
            
            <view class="avatar" @click="sendAvatar()">
                <image :src="vuex_user.avatar"></image>
            </view>
            
            <view class="c1">昵称</view>
            <view class="c2">
                <u--input
                    v-model='vuex_user.nickname'
                    placeholder="请输入"
                    :customStyle="{padding: '0 32rpx'}"
                >
                </u--input>
            </view>
            
            <view class="c1">性别</view>
            <view class="c2">
                <u--input
                    v-model='vuex_user.gender_text'
                    placeholder="请选择"
                    :customStyle="{padding: '0 32rpx'}"
                    suffixIcon="arrow-down"
                    suffixIconStyle="color: #7D8592"
                    readonly
                >
                </u--input>
                <view class="on_in" @click="gender_show = true"></view>
            </view>
            
            <view class="c1">生日</view>
            <view class="c2">
                <u--input
                    v-model='vuex_user.birthday'
                    placeholder="请选择"
                    :customStyle="{padding: '0 32rpx'}"
                    suffixIcon="arrow-down"
                    suffixIconStyle="color: #7D8592"
                    readonly
                >
                </u--input>
                <view class="on_in" @click="birthday_show = true"></view>
            </view>
			
<!-- 			<view class="c1">手机号</view>
			<view class="c2">
			    <u--input
			        v-model='vuex_user.mobile'
			        placeholder="请输入"
			        :customStyle="{padding: '0 32rpx'}"
			    >
			        <template slot="suffix">
			            <u-code
			                ref="uCode"
			                @change="codeChange"
			                seconds="10"
			                changeText="X秒重新获取"
			                :keepRunning='true'
			            ></u-code>
			            <text v-if="isMobile !== vuex_user.mobile" class="tips" @tap="getCode">{{ tips }}</text>
			        </template>
			    </u--input>
			</view>
			<view v-if="isMobile !== vuex_user.mobile">
				<view class="c1">短信验证码</view>
				<view class="c3">
				    <valid-code ref="code" :maxlength="4" :isPwd="false" @finish="setCode" ></valid-code>
				</view>
			</view> -->
            
            <view class="c1">所在地区</view>
            <view class="c2">
                <u--input
                    v-model='vuex_user.address'
                    placeholder="请输入"
                    :customStyle="{padding: '0 32rpx'}"
                >
                </u--input>
            </view>
            
            <view class="c1">微信二维码</view>
            
            <view class="qrcode" @click="sendImage()">
                <image v-if="vuex_user.qrcode != ''" :src="vuex_user.qrcode"></image>
                <image v-else src="@/static/icon/qrcode.png"></image>
                
                <u-icon name="arrow-right"></u-icon>
            </view>
            
        </view>
        
        <view class="but">
            <view class="s2" @click="onSend()">
                <text>保 存</text>
            </view>
        </view>
        
        <u-picker :show="gender_show" :columns="columns"
            @confirm='onGender'
            @close='onClose'
            @cancel='onClose'
            closeOnClickOverlay
        ></u-picker>
        
        <u-datetime-picker
            :show="birthday_show"
            v-model="birthday_time"
            mode="date"
            :formatter="formatter"
            :minDate='0'
            :maxDate="maxDate"
            @close='onClose'
            @confirm='onConfirmBirthday'
            @cancel='onClose'
            closeOnClickOverlay
        ></u-datetime-picker>
        
    </view>
</template>

<script>
	import {
		getRawUserInfo
	} from '@/api/user.js'
	
    import validCode from '@/components/validCode.vue'
    import conf from '@/common/config.js';
    export default {
        components: {
            validCode
        },
        data() {
            return {
				isMobile: '', 
                tips: '',
                gender_show: false,
                birthday_show: false,
                columns: [
                    ['未知', '男', '女']
                ],
                birthday_time: Number(new Date()),
                maxDate: Number(new Date()),
                birthday_date: '',
				mobile:'',
                avatar: '',
                qrcode: '',
            };
        },
        onShow() {
        },
		onLoad() {
			getRawUserInfo().then(res => {
				if (1 == res.code) {
					this.avatar = res.data.avatar
				}
			});
		},
		created() {
			this.isMobile = this.vuex_user.mobile
		},
        methods: {
			getCode() {
			    let that = this
			    if (!this.vuex_user.mobile) {
					uni.$u.toast('请输入手机号');
			        return false;
			    }
			    if(this.$refs.uCode.canGetCode) {
			        uni.showLoading({
			            title: '正在获取验证码'
			        })
			        this.$API.sendCode({mobile: this.vuex_user.mobile}).then(res => {
			            uni.hideLoading();
			            this.description = '短信验证码已发送至您的手机号码 ' + this.vuex_user.mobile + '，有效期至 60S';
			            this.c4_show = true;
			            this.$refs.uCode.start();
			            setTimeout(function () {
			                that.c4_show = false;
			            }, 3000);
			        }).catch(err => {
			            uni.hideLoading();
			        })
			    } else {
			        uni.$u.toast('倒计时结束后再发送');
			    }
			},
			codeChange(text) {
			    this.tips = text;
			},
			setCode(res) {
			    this.vuex_user.code = res
			},
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
            formatDate(value) {
                if(value == undefined){
                    return;
                }
                // let date = new Date(value * 1000);
                let date = new Date(value);
                //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM; //月补0
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d; //天补0
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h; //小时补0
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m; //分钟补0
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s; //秒补0
                return y + '-' + MM + '-' + d; //年月日
                // return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
            },
            onGender(e) {
                console.log('e', e)
                this.vuex_user.gender = e.indexs[0]
                this.vuex_user.gender_text = e.value[0]
                this.gender_show = false;
            },
            onConfirmBirthday(e) {
                this.vuex_user.birthday = this.formatDate(e.value);
                this.birthday_show = false;
            },
            sendAvatar() {
                let that = this;
                let host_url = conf.url_config + '/api/common/upload';
                uni.chooseImage({
                	success: (chooseImageRes) => {
                		const tempFilePaths = chooseImageRes.tempFilePaths;
                		uni.uploadFile({
                			url: host_url, //仅为示例，非真实的接口地址
                			filePath: tempFilePaths[0],
                			name: 'file',
                			header: {
                			    Token: this.vuex_token
                			},
                			success: (uploadFileRes) => {
                                let data = JSON.parse(uploadFileRes.data);
                				that.vuex_user.avatar = data.data.fullurl;
                				that.avatar = data.data.url;
                			}
                		});
                	}
                });
            },
            sendImage() {
                let that = this;
                let host_url = conf.url_config + '/api/common/upload';
                uni.chooseImage({
                	success: (chooseImageRes) => {
                		const tempFilePaths = chooseImageRes.tempFilePaths;
                		uni.uploadFile({
                			url: host_url, //仅为示例，非真实的接口地址
                			filePath: tempFilePaths[0],
                			name: 'file',
                			header: {
                			    Token: this.vuex_token
                			},
                			success: (uploadFileRes) => {
                                let data = JSON.parse(uploadFileRes.data);
                				that.vuex_user.qrcode = data.data.fullurl;
                				that.qrcode = data.data.url;
                			}
                		});
                	}
                });
            },
            onClose() {
                this.gender_show = false;
                this.birthday_show = false;
            },
            onSend() {
				let params = {}
				if (!this.vuex_user.mobile) {
				    uni.$u.toast('请输入手机号');
				    return false;
				}
				
				if (this.isMobile !== this.vuex_user.mobile && !this.vuex_user.code) {
				    uni.$u.toast('请输入验证码');
				    return false;
				}
				if (this.isMobile !== this.vuex_user.mobile) {
					params = {
						nickname: this.vuex_user.nickname,
						gender: this.vuex_user.gender,
						birthday: this.vuex_user.birthday,
						address: this.vuex_user.address,
						qrcode: this.qrcode,
						avatar: this.avatar,
						mobile: this.vuex_user.mobile,
						code: this.vuex_user.code
					}
				} else {
					params = {
						nickname: this.vuex_user.nickname,
						gender: this.vuex_user.gender,
						birthday: this.vuex_user.birthday,
						address: this.vuex_user.address,
						qrcode: this.qrcode,
						avatar: this.avatar
					}
				}
                this.$API.sendProfile(params).then(res => {
                    this.$u.vuex('vuex_user', this.vuex_user);
                    uni.showModal({
                        content: '保存成功',
                        showCancel: false,
                        success:function(){
                            uni.redirectTo({
                                url: '/pages/my/index',
                            })
                        }
                    })
                })
            }
        }
    }
</script>

<style lang="scss">
.c3 {
	margin-top: 40rpx;
}
.tips {
	font-size: 28rpx;
	color: #7677EB;
}
.content {
    width: 670rpx;
    margin: 0 auto;
}
.info {
    width: 566rpx;
    padding: 52rpx;
    margin: 52rpx auto;
    background-color: #fff;
    border-radius: 48rpx;
    @include flex(column);
    
    .avatar {
        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }
    }
    
    .c1 {
        height: 28rpx;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        color: #7D8592;
        line-height: 28rpx;
        margin-top: 56rpx;
    }
    
    .c2 {
        width: 566rpx;
        margin-top: 40rpx;
        position: relative;
        /deep/ .u-input {
            height: 98rpx;
            border-radius: 28rpx;
        }
        .on_in {
            position: absolute;
            inset: 0;
        }
    }
    
    .qrcode {
        @include flex;
        justify-content: space-between;
        align-items: center;
        image {
            width: 128rpx;
            height: 128rpx;
            margin-top: 24rpx;
        }
    }
    
}

.but {
    @include flex;
    margin-top: 60rpx;
    margin-bottom: 60rpx;
    
    .s2 {
        width: 290rpx;
        height: 96rpx;
        background: #7677EB;
        box-shadow: 0 12rpx 24rpx 0 rgba(63,140,255,0.2637);
        border-radius: 28rpx;
        margin: 0 auto;
        text-align: center;
        
        text {
            font-size: 30rpx;
            font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 96rpx;
        }
    }
}

</style>
